<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-02-06 11:23:56
 * @LastEditTime: 2025-02-19 08:41:52
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \uniapp\src\pages\index\insurance.vue
-->
<template>
    <view class="bg-page">
        <u-tabs class="base-tabs" :list="tabList" :is-scroll="false" v-model="current" @change="handleChange"
            activeColor="var(--color-primary)" inactive-color="#606266" font-size="32"></u-tabs>
        <view class="page-list tabs mt-[10px]">
            <z-paging auto-show-back-to-top ref="paging" v-model="dataList" @query="queryList" :fixed="false"
                height="100%">
                <view class="mb-[10px] bg-white p-[32rpx]" v-for="(item, index) in dataList" :key="index">
                    <view class="flex flex-row items-center">
                        <image :src="item.img" class="w-[152rpx] h-[208rpx] rounded-[8rpx]"></image>
                        <view class="flex flex-col flex-1 ml-[20px]">
                            <view class="mb-[8px] flex flex-row justify-between self-stretch text-base">
                                <view class="font-semibold self-center u-line-1 max-w-[350rpx] text-[36rpx] text-main">
                                    {{ item.name }}</view>
                                <view class="self-start">
                                    <text v-if="item.status == 20" class="text-success">{{
                                        item.status_text
                                        }}</text>
                                    <text v-if="item.status == 10" class="text-primary">{{
                                        item.status_text
                                        }}</text>
                                    <text v-if="item.status == -10" class="text-warning">{{
                                        item.status_text
                                        }}</text>
                                </view>
                            </view>
                            <view class="text-c5 mb-[8px]">卡密：{{ item.name }}</view>
                            <view class="text-c5 mb-[8px]">有效时间：{{ item.start_date }}-{{ item.end_date }}</view>
                            <view class="text-c5 mb-[8px]">手机imei：{{ item.orderinfo.imei }}</view>
                        </view>
                    </view>
                    <view @tap="toApply(item)" v-if="item.status == 20"
                        class="text-[30rpx] mt-[26rpx] text-center text-primary font-extrabold pt-[26rpx] pb-[6rpx] border-solid border-0 border-t border-[#f5f5f5]">
                        我要报修
                    </view>
                </view>
            </z-paging>
        </view>
    </view>
</template>

<script setup lang="ts">
import { insuranceList } from '@/api/repair'
import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
import { computed, nextTick, reactive, ref, shallowRef } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

const appStore = useAppStore()
const userStore = useUserStore()
const token = computed(() => userStore.token)
const tabList = [
    { name: '全部', status: -1 },
    { name: '待审核', status: 10 },
    { name: '已生效', status: 20 },
    { name: '已失效', status: 25 }
]

const current = ref<number>(0)
const paging = shallowRef<any>(null)
const dataList = ref<any[]>([])
const state = reactive({})

const handleChange = (index: number) => {
    current.value = Number(index)
    paging.value.reload()
}

function toApply(item: any) {
    uni.navigateTo({
        url: `/pagesrepair/applyinrepair?id=${item.id}`
    })
}
const queryList = async (page_no: number = 1, page_size: number = 10) => {
    try {
        const { data } = await insuranceList({
            page_no,
            page_size,
            type: 10,
            status: tabList[current.value].status
        })
        paging.value.complete(data)
    } catch (e) {
        console.log('报错=>', e)
        paging.value.complete(false)
    }
}

onLoad(() => {
    // paging.value.reload();
})
onShow(async () => {
    // await nextTick()
    // paging.value.reload();
})
</script>

<style lang="scss" scoped></style>
